@charset "UTF-8";


html, body, div, p, span, label, img, a, ol, ul, dl, dt, dd, li, table, tr, td, th, tbody, thead, tfoot, form, fieldset, legent, h1, h2, h3, h4, h5, h6, strong, b, em, blockquote, cite, pre, code, hr, br, input, button, textarea,article, aside, details, figcaption, figure, footer, header, group, menu, nav, section { padding:0px; margin:0px; }
a { border:0 none; cursor:pointer; }
ol, ul { list-style-type:none; }
em,i{ font-style:normal;}
a:link, a:visited { text-decoration:none; }
.clearfix:after{clear:both; content:""; display:block; height:0; visibility:hidden; line-height:0;}
.clearfix { zoom:1; }
.clear { clear:both; height:0; width:0; display:block; visibility:hidden; overflow:hidden;}
.left { float:left; display:inline; }
.right { float:right; display:inline; }
.block{ display:block;}
.hidden{ display:none;}
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; }

body{ font-family:"Microsoft yahei", "SimHei"; color:#313131;overflow: hidden;}


.container{ width:100%; /*height:828px;*/ height:100%; position:absolute; left:0px; top:0px;}
/*.logo{ position:absolute; right:50px; top:35px; width:248px; height:50px; text-indent:-999px; overflow:hidden; background:url(logo.png) no-repeat;}*/
.title1 span{ display:inline-block; -webkit-transform:rotate(90deg);}
.shu{ background:url(shu.png) center bottom no-repeat; width:767px; height:780px; position:absolute; left:50%; margin-left:-353px; bottom:0px;}
/*头像列表*/
.avatar-list{ width:767px; height:780px; position:relative;}
.avatar-list li{ position:absolute;}
.avatar-list li .txt{ display:none; width:490px; height:100px; overflow:hidden; border:3px solid #fbdbcb; border-radius:10px; background:rgba(252,208,145,0.9); position:absolute; top:30px; left:190px;}
.avatar-list li .txt .inner{ width:380px; height:100px; overflow:hidden; position:relative; margin:0 30px 0 90px;}
.avatar-list li .txt em{ display:block; background:url(txt-ico.png) no-repeat; width:111px; height:100px; position:absolute; left:0px; top:0px; z-index:1;}
.avatar-list li .txt h4{ display:inline-block; width:auto; height:100px; font-size:36px; line-height:100px; white-space:pre; padding-right:35px;}
.avatar-list li.big3{ -webkit-transform:scale(0.6);}
.avatar-list li.big2{ -webkit-transform:scale(0.5);}
.avatar-list li.big1{ -webkit-transform:scale(0.4);}
.avatar-list li.on{ z-index:1;}
.avatar-list li.on .txt,.avatar-list li.ava-new .txt{ display:block;}
.ava-new{ left:35px; top:210px; z-index:100;}
.ava-new .box-inner{ -webkit-transform:scale(0.9) rotate(-15deg);}
.ava1{ left:105px; top:185px; -webkit-transform:scale(0.6);}
.ava1 .box{ -webkit-transform:scale(0.8) rotate(-20deg);}
.ava2{ left:195px; top:140px; -webkit-transform:scale(0.4);}
.ava2 .box-inner{ -webkit-transform:scale(0.8) rotate(10deg);}
.ava3{ left:255px; top:60px; -webkit-transform:scale(0.4);}
.ava4{ left:310px; top:155px; -webkit-transform:scale(0.6);}
.ava5{ left:435px; top:80px; -webkit-transform:scale(0.5);}
.ava5 .box-inner{ -webkit-transform:scale(0.8) rotate(-35deg);}
.ava6{ left:557px; top:101px; -webkit-transform:scale(0.6);}
.ava6 .box-inner{ -webkit-transform:scale(0.9) rotate(15deg);}
.avatar-list li.ava6 .txt{ position:absolute; right:180px; left:auto;}
.ava7{ left:225px; top:235px; -webkit-transform:scale(0.5);}
.ava8{ left:340px; top:230px; -webkit-transform:scale(0.4);}
.ava8 .box-inner{ -webkit-transform:scale(0.8) rotate(-15deg);}
.ava9{ left:410px; top:200px; -webkit-transform:scale(0.5);}
.ava10{ left:540px; top:244px; -webkit-transform:scale(0.4);}
.avatar-list li.ava10 .txt{ position:absolute; right:180px; left:auto;}
.ava11{ left:615px; top:270px; -webkit-transform:scale(0.6);}
.ava11 .box-inner{ -webkit-transform:scale(0.9) rotate(-15deg);}
.avatar-list li.ava11 .txt{ position:absolute; right:200px; left:auto;}
.ava12{ left:440px; top:290px; -webkit-transform:scale(0.6);}
.ava12 .box-inner{ -webkit-transform:scale(0.9) rotate(25deg);}
.ava13{ left:595px; top:375px; -webkit-transform:scale(0.4);}
.ava13 .box-inner{ -webkit-transform:scale(0.8) rotate(40deg);}
.avatar-list li.ava13 .txt{ position:absolute; right:160px; left:auto;}
.ava14{ left:510px; top:428px; -webkit-transform:scale(0.4);}
.avatar-list li.ava14 .txt{ position:absolute; right:185px; left:auto;}
.ava15{ left:390px; top:390px; -webkit-transform:scale(0.5);}
.ava15 .box-inner{ -webkit-transform:scale(0.8) rotate(-25deg);}
.ava16{ left:310px; top:338px; -webkit-transform:scale(0.5);}
.ava16 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava17{ left:230px; top:334px; -webkit-transform:scale(0.6);}
.ava17 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava18{ left:140px; top:254px; -webkit-transform:scale(0.4);}
.ava18 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava19{ left:57px; top:313px; -webkit-transform:scale(0.6);}
.ava20{ left:180px; top:404px; -webkit-transform:scale(0.4);}
.ava20 .box-inner{ -webkit-transform:scale(0.8) rotate(-40deg);}
.ava21{ left:230px; top:428px; -webkit-transform:scale(0.5);}
.ava21 .box-inner{ -webkit-transform:scale(0.8) rotate(40deg);}
.ava22{ left:170px; top:505px; -webkit-transform:scale(0.5);}
.ava23{ left:340px; top:462px; -webkit-transform:scale(0.6);}
.ava23 .box-inner{ -webkit-transform:scale(0.8) rotate(20deg);}


.box-inner{ width:177px; height:163px; padding:10px; background:url(heart-bg.png) center -7px no-repeat; background-size:100% auto; overflow:hidden; position:relative;-webkit-transform:scale(0.8);}
.box1{ width:100px; height:50px; overflow:hidden; border-radius:50px 50px 0 0; -webkit-transform:rotate(-45deg); position:absolute; left:-8px; top:19px; border-left:3px solid #fbdbcb; border-top:3px solid #fbdbcb; border-right:3px solid #fbdbcb;}
.box1 img{ width:170px; -webkit-transform:rotate(45deg); position:absolute; left:-28px; top:7px;}
.box2{ width:100px; height:50px; overflow:hidden; border-radius:50px 50px 0 0; -webkit-transform:rotate(45deg); position:absolute; left:99px; top:19px; border-top:3px solid #fbdbcb; border-right:3px solid #fbdbcb; border-left:3px solid #fbdbcb;}
.box2 img{ width:170px; -webkit-transform:rotate(-45deg); position:absolute; right:-28px; top:7px;}
.box3{ width:100px; height:100px; overflow:hidden; -webkit-transform:rotate(45deg); position:absolute; left:47px; top:49px; border-right:3px solid #fbdbcb; border-bottom:3px solid #fbdbcb;}
.box3 img{ width:170px; -webkit-transform:rotate(-45deg); position:absolute; bottom:-27.5px; left:-42px;}



.avatar-list li.on .txt,.ava-new {
  -webkit-animation-name: zoomIn ;
  animation-name: zoomIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
}
.ava-new{-webkit-animation-duration: 1s;
  animation-duration: 1s;}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    opacity: 1;
  }
  

}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    opacity: 1;
  }
  
}

.avatar-list li.on .box{
  -webkit-animation-name: bounceIn2 ;
  animation-name: bounceIn2;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
}

@-webkit-keyframes bounceIn2 {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
	opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  
  25% {
    opacity: .8;
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
  }

  50% {
	opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }
  
  75% {
    opacity: .8;
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
	opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }
}

.heart2{ width:68px; height:250px; position:absolute; left:81px; bottom:186px;}
.heart2 span{ display:block; background-image:url(heart.png); background-repeat:no-repeat; position:absolute;}
.t1{ width:10px; height:9px; background-position:-48px bottom; left:48px; bottom:0px; -webkit-animation:eart1 4s infinite linear;-webkit-animation-iteration-count:1;}
.t2{ width:15px; height:13px; background-position:0px -229px; left:0px; top:229px; -webkit-animation:eart2 4s infinite linear;-webkit-animation-iteration-count:1;}
.t3{ width:10px; height:9px; background-position:-17px -225px; left:17px; top:225px; -webkit-animation:eart3 4s infinite linear;-webkit-animation-iteration-count:1;}
.t4{ width:20px; height:20px; background-position:-26px -208px; left:26px; top:208px; -webkit-animation:eart4 4s infinite linear;-webkit-animation-iteration-count:1;}
.t5{ width:22px; height:19px; background-position:-8px -190px; left:8px; top:190px; -webkit-animation:eart5 4s infinite linear;-webkit-animation-iteration-count:1;}
.t6{ width:20px; height:20px; background-position:-14px -148px; left:14px; top:148px; -webkit-animation:eart6 4s infinite linear;-webkit-animation-iteration-count:1;}
.t7{ width:10px; height:10px; background-position:-3px -124px; left:3px; top:124px; -webkit-animation:eart7 4s infinite linear;-webkit-animation-iteration-count:1;}
.t8{ width:14px; height:14px; background-position:-43px -40px; left:43px; top:40px; -webkit-animation:eart8 4s infinite linear;-webkit-animation-iteration-count:1;}
.t9{ width:23px; height:22px; background-position:right top; right:0px; top:0px; -webkit-animation:eart9 4s infinite linear;-webkit-animation-iteration-count:1;}
@-webkit-keyframes eart1 {
  0%{ opacity:0;}
  10%{ opacity:1;}
}
@-webkit-keyframes eart2 {
  0%,10%{ opacity:0;}
  20%{ opacity:1;}
}
@-webkit-keyframes eart3 {
  0%,20%{ opacity:0;}
  30%{ opacity:1;}
}
@-webkit-keyframes eart4 {
  0%,30%{ opacity:0;}
  40%{ opacity:1;}
}
@-webkit-keyframes eart5 {
  0%,40%{ opacity:0;}
  50%{ opacity:1;}
}
@-webkit-keyframes eart6 {
  0%,50%{ opacity:0;}
  60%{ opacity:1;}
}
@-webkit-keyframes eart7 {
  0%,60%{ opacity:0;}
  70%{ opacity:1;}
}
@-webkit-keyframes eart8 {
  0%,70%{ opacity:0;}
  80%{ opacity:1;}
}
@-webkit-keyframes eart9 {
  0%,80%{ opacity:0;}
  90%{ opacity:1;}
}

.heart3{ display:none; width:41px; height:76px; position:absolute; left:27px; bottom:52px;}
.heart3 span{ display:block; background-image:url(heart2.png); background-repeat:no-repeat; position:absolute;}
.t10{ width:21px; height:19px; background-position:right bottom; right:0px; bottom:0px; -webkit-animation:eart10 4s infinite linear;-webkit-animation-iteration-count:1;}
.t11{ width:9px; height:9px; background-position:-28px -32px; left:28px; top:32px; -webkit-animation:eart11 4s infinite linear;-webkit-animation-iteration-count:1;}
.t12{ width:15px; height:13px; background-position:left top; left:0px; top:0px; -webkit-animation:eart12 4s infinite linear;-webkit-animation-iteration-count:1;}
@-webkit-keyframes eart10 {
  0%{ opacity:0;}
  10%{ opacity:1;}
}
@-webkit-keyframes eart11 {
  0%,10%{ opacity:0;}
  20%{ opacity:1;}
}
@-webkit-keyframes eart12 {
  0%,20%{ opacity:0;}
  30%{ opacity:1;}
}


body{}
@media screen and (max-width:1024px){
  .wrap{ width:1000px;}
  .title2{ width:146px; height:313px; background-size:100% auto; top: 50px;left: 25px;}
  .shu{ background-image:url(shu.png); margin-left:-350px;}
  .heart{ margin-left:-920px;}
  .heart2{ display:none;}
  .heart3{ display:block;}
}

/*五种效果*/
.effect{width:100%;position: absolute;left: 0;top: 0;bottom: 0;}
/*1、玫瑰*/
.effect .rose{width: 58px;height: 85px;background: url(rose/rose.png);position: absolute;top: -100px;}
.effect .rose{-webkit-animation:rose 3s 1;animation:rose 3s 1;}
@-webkit-keyframes rose {
  0%{ top:-100px;opacity: 1;}
  100%{ top:800px;opacity: 0;}
}

/*2、礼物*/
.effect .gift{position: absolute;top: -100px;}
.effect .gift{-webkit-animation:gift 3s 1;animation:gift 3s 1;}
@-webkit-keyframes gift {
  0%{ top:-100px;}
  100%{ top:800px;}
}

/*3、星星*/
.effect .star{width: 72px;height: 101px;background: url(star/star5.png) no-repeat;position: absolute;top: -100px;opacity: 0;}
.effect .star{-webkit-animation:star 2s 3;animation:star 2s 3;}
@-webkit-keyframes star {
  0%{ opacity: 0;-webkit-transform: scale(0,0)}
  70%{opacity: 1;-webkit-transform: scale(1,1)}
  100%{opacity: 0;}
}
/*4、蛋糕*/
.effect .cake1{-webkit-transform: scale(1,1);z-index:99999;position:absolute;left:50%;margin-left:-132px;top:50%;margin-top:-105px;background: url(cake/cake1.png);width: 264px;height: 211px;opacity: 0;}
@-webkit-keyframes cake {
  0%{ opacity: 0;-webkit-transform: scale(0,0)}
  50%{opacity: 1;-webkit-transform: scale(1,1)}
  100%{ opacity: 0;-webkit-transform: scale(1,1)}
}

/*4、心闪烁*/
.effect .lover{width: 156px;height: 146px;background: url(lover/lover-shadow2.png) no-repeat center center;background-size:53px 47px;position: absolute;top: 0px;opacity: 0;}
.effect .lover img{width:53px;height: 47px;position: absolute;left: 50%;margin-left: -26px;top: 50%;margin-top: -24px; }
.effect .lover{-webkit-animation:lover 3s 3;animation:lover 3s 3;}
@-webkit-keyframes lover {
  0%{ opacity: 0;background-size:53px 47px;}
  80%{opacity: 1;background-size:156px 146px;}
  100%{opacity: 0;background-size:156px 146px;}
}